<script lang="ts" setup>
  defineOptions({
    name: 'OrbitOfThePlanet',
    inheritAttrs: false
  })
  const list = [
    {
      id: '1',
      name: '土星'
    }
  ]
</script>
<template>
  <div class="wrap w-full h-full overflow-hidden flex justify-center items-center">
    <div class="planet">
      <div v-for="item in list" :key="item.id" class="orbit saturn">
        <span class="rings"></span>
        <span class="name">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .wrap {
    background-image: linear-gradient(180deg, #020205 0%, #170f39 51%, #35247a 95%);
  }
  .planet {
    position: relative;

    width: 648px;
    height: 648px;

    animation: p-rotate 20s linear infinite;

    border: 1px solid #fff;
    border-radius: 50%;

    transform-style: preserve-3d;
  }
  .orbit {
    position: absolute;
    top: -25px;
    left: calc(50% - 25px);

    width: 50px;
    height: 50px;

    animation: self-rotate 20s linear infinite;

    border-radius: 50%;
    background-color: red;
    .name {
      position: absolute;
      bottom: -20px;
      left: 50%;

      display: inline-block;

      transform: translateX(-50%);
      white-space: nowrap;

      color: #fff;
    }
  }

  @keyframes p-rotate {
    0% {
      transform: rotate(45deg) scaleY(0.5) rotate(0);
    }
    100% {
      transform: rotate(45deg) scaleY(0.5) rotate(360deg);
    }
  }
  @keyframes self-rotate {
    0% {
      transform: rotate(0) scaleY(2) rotate(-45deg);
    }
    100% {
      transform: rotate(-360deg) scaleY(2) rotate(-45deg);
    }
  }
  .saturn {
    transform: rotate(-15deg);
  }
  .saturn::before,
  .saturn::after {
    position: absolute;

    width: 50px;
    height: 50px;

    content: '';

    border-radius: 50%;
    background: radial-gradient(circle at top, transparent 40%, black),
      radial-gradient(transparent 62%, black),
      linear-gradient(
        rgba(212, 203, 174, 1) 0%,
        rgba(212, 203, 174, 1) 10%,
        rgba(221, 203, 157, 1) 15%,
        rgba(221, 203, 157, 1) 17%,
        rgba(213, 181, 143, 1) 22%,
        rgba(213, 181, 143, 1) 26%,
        rgba(208, 180, 158, 1) 32%,
        rgba(208, 180, 158, 1) 36%,
        rgba(218, 188, 162, 1) 37%,
        rgba(218, 188, 162, 1) 39%,
        rgba(211, 184, 157, 1) 41%,
        rgba(211, 184, 157, 1) 49%,
        rgba(205, 186, 156, 1) 51%,
        rgba(205, 186, 156, 1) 52%,
        rgba(202, 176, 153, 1) 53%,
        rgba(202, 176, 153, 1) 65%,
        rgba(190, 177, 145, 1) 68%,
        rgba(190, 177, 145, 1) 80%,
        rgba(150, 144, 130, 1) 91%,
        rgba(150, 144, 130, 1) 95%,
        rgba(131, 129, 117, 1) 97%,
        rgba(131, 129, 117, 1) 100%
      );
  }
  .saturn::before {
    clip-path: inset(50% 0 0 0);
  }
  .saturn::after {
    clip-path: inset(0 0 50% 0);
  }
  .rings {
    position: absolute;

    width: inherit;
    height: inherit;

    transform: rotateX(75deg) scale(3);

    background: radial-gradient(
      rgba(24, 19, 25, 0) 0%,
      rgba(53, 52, 51, 0) 34%,
      rgba(55, 54, 52, 1) 36%,
      rgba(56, 55, 53, 1) 37%,
      rgba(68, 67, 66, 1) 38%,
      rgba(56, 55, 53, 1) 39%,
      rgba(68, 67, 66, 1) 40%,
      rgba(56, 55, 53, 1) 41%,
      rgba(87, 77, 76, 1) 42%,
      rgba(87, 77, 76, 1) 44%,
      rgba(113, 110, 103, 1) 46%,
      rgba(113, 110, 103, 1) 48%,
      rgba(113, 98, 93, 1) 49%,
      rgba(113, 98, 93, 1) 51%,
      rgba(122, 115, 105, 1) 52%,
      rgba(113, 98, 93, 1) 53%,
      rgba(113, 98, 93, 1) 54%,
      rgba(122, 115, 105, 1) 55%,
      rgba(106, 99, 89, 1) 56%,
      rgba(106, 99, 89, 1) 58%,
      rgba(79, 76, 76, 0) 60%,
      rgba(65, 64, 70, 1) 61%,
      rgba(65, 64, 70, 1) 62%,
      rgba(90, 85, 89, 1) 63%,
      rgba(78, 74, 73, 1) 65%,
      rgba(78, 73, 74, 1) 67%,
      rgba(78, 73, 74, 0) 68%,
      rgba(78, 73, 75, 1) 69%,
      rgba(78, 73, 75, 1) 70%,
      rgba(78, 73, 76, 0) 71%,
      rgba(77, 72, 76, 0) 72%,
      rgba(24, 19, 25, 0) 100%
    );
  }
</style>
